<template>
<div class="mine">
  <button @click="$store.commit('logout'); logout()">退出登录</button>
	<div class="mine-user">
    <img :src="tx" class="user-tx">
    <div class="user-level">
      <img :src="userLevel" alt="">
      <span>18408248700</span>
    </div>
    <div class="user-id">
      乐迷123123123
    </div>
    <div class="user-ye">
      <span>余额：￥0</span>
      <span>积分：0</span>
      <span>成长值：0</span>
    </div>
  </div>
  <div class="user-first">
    <ul class="user-order">
      <li>
        <img :src="m01">
        <span>待支付</span>
      </li>
      <li>
        <img :src="m02">
        <span>待收货</span>
      </li>
      <li>
        <img :src="m04">
        <span>退款 / 退货</span>
      </li>
    </ul>
    <ul class="list">
      <li>
        <span>全部订单</span>
        <span>查看全部订单 ></span>
      </li>
      <li>
        <span>充反订单</span>
        <span>查看全部订单 ></span>
      </li>
    </ul>

  </div>
  <ul class="list2">
      <li>
        <span>我的收藏</span>
        <span>&gt;</span>
      </li>
     <!-- <li>
        <span>我的收藏</span>
        <span>&gt;</span>
      </li>-->
      <li>
        <span>VIP账户</span>
        <span>&gt;</span>
      </li>
      <li>
        <span>礼品卡</span>
        <span>&gt;</span>
      </li>
      <li>
        <span>提货卡</span>
        <span>&gt;</span>
      </li>
      <li>
        <span>优惠券</span>
        <span>&gt;</span>
      </li>
      <li>
        <span>会员俱乐部</span>
        <span>&gt;</span>
      </li>
      <li>
        <span>个人管理</span>
        <span>&gt;</span>
      </li>
    </ul>
</div>
</template>

<script>
// import u_bk from '../assets/u_bk.jpg'
import tx from "../assets/134-134.jpg";
import userLevel from "../assets/user-level.png";
import m01 from "../assets/m01.png";
import m02 from "../assets/m02.png";
import m04 from "../assets/m04.png";
export default {
  data: () => ({
    tx,
    userLevel,
    m01,
    m02,
    m04
  }),
  methods: {
    logout() {
      this.$router.push("./mine1");
    }
  }
};
</script>

<style scoped lang="scss">
@import '../styles/yo/usage/core/reset.scss';
.mine {
  @include flexbox();
  @include flex-direction(column);
  background: #f8f8f8;
  height: 100%;
  position: relative;
  button {
    font-size: 16px;
    color:#ccc;
    position: absolute;
    left: 2.38rem;
    top: .02rem;
    width: .8rem;
    height: .4rem;
    border-radius: 10px;
    z-index: 9999;
    background: none;
    border: 1px solid #999;
  }
  .mine-user {
    text-align: center;
    height: 200px;
    background-image: url("../assets/u_bk.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    .user-tx {
      margin-top: 0.15rem;
      width: 0.64rem;
      height: 0.64rem;
      border-radius: 50%;
    }
    .user-level {
      margin-top: 0.1rem;
      line-height: 0.2rem;
      font-size: 12px;
      img {
        width: 0.28rem;
        height: 0.28rem;
      }
      span {
        border-top-right-radius: 0.1rem;
        border-bottom-right-radius: 0.1rem;
        padding: 0 0.1rem;
        color: #fff;
        margin-left: -0.1rem;
        background: rgba(255, 255, 255, 0.38);
        display: inline-block;
      }
    }
    .user-id {
      color: #fff;
      line-height: 0.25rem;
    }
    .user-ye {
      color: #ff9c00;
    }
  }
  .user-first {
    background: #fff;
    padding: 0 0.1rem;
    .user-order {
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.1rem 0;
      li {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
        img {
          width: 0.3rem;
          height: 0.3rem;
        }
        &:first-child {
          border-left: none;
        }
        &:last-child {
          border-right: none;
        }
      }
    }
    .list {
      font-size: 12px;
      border-bottom: 1px solid #eee;
      li {
        border-bottom: 1px solid #eee;
        padding: 0.1rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          &:last-child {
            color: #999;
          }
        }
        &:last-child {
          border: none;
        }
      }
    }
    .list2 {
      margin-top: 0.1rem;
    }
  }
  .list2 {
    background: #fff;
    padding: 0 0.1rem;
    margin-top: 0.1rem;
    font-size: 12px;
    border-bottom: 1px solid #eee;
    li {
      border-bottom: 1px solid #eee;
      padding: 0.1rem 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        &:last-child {
          color: #999;
        }
      }
      &:last-child {
        border: none;
      }
    }
  }
}
</style>

